<template>
  <div>
    <div style="width: 25%; float: left; height: 300px">
      <el-tree
        :data="mapdata"
        ref="permission"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        show-checkbox
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div style="width: 35%; float: left">
      <el-form
        :model="treedate"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="父级权限">
          <el-select v-model="treedate.pId" placeholder="请选择父级权限">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              width="150px"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="treedate.name"></el-input>
        </el-form-item>
        <el-form-item label="权限图标" prop="icon">
          <el-input v-model="treedate.icon"></el-input>
        </el-form-item>
        <el-form-item label="权限Url" prop="path">
          <el-input v-model="treedate.path"></el-input>
        </el-form-item>
        <el-form-item label="排序Id" prop="sortId">
          <el-input v-model="treedate.sortId"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="disable">
          <el-radio-group v-model="treedate.disable">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm', 1)"
            >添加同级</el-button
          >
          <el-button type="primary" @click="submitForm('ruleForm', 2)"
            >添加子级</el-button
          >
          <el-button type="primary" @click="submitForm('ruleForm', 3)"
            >编辑</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getsysManagapi,
  getsysManagesapi,
  addtree,
  updatetree,
} from "@/api/sysManage/sysManag";
export default {
  data() {
    return {
      list: [],
      mapdata: [],

      defaultProps: {
        children: "children",
        label: "name",
      },
      ruleForm: {},
      rules: {},

      treedate: {
        id: 0,
        pId: 0,
        name: "",
        icon: "",
        path: "",
        sortId: 0,
        disable: true,
      },
    };
  },
  created() {
    this.load();
    getsysManagesapi().then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    load() {
      getsysManagapi().then((res) => {
        this.mapdata = res.data.data;
        //this.treedate = res.data.data;
      });
    },
    submitForm(formName, x) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (x == 1) {
            this.treedate.id = 0;
            addtree(this.treedate).then((res) => {
              if (res.data) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.load();
              }
            });
          } else if (x == 2) {
            this.treedate.pId = this.treedate.id;
            this.treedate.id = 0;
            addtree(this.treedate).then((res) => {
              if (res.data) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.load();
              }
            });
          } else {
            updatetree(this.treedate).then((res) => {
              if (res.data) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.load();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleNodeClick(row) {
      this.treedate.id = row.id;
      this.treedate.pId = row.pId;
      this.treedate.name = row.name;
      this.treedate.icon = row.icon;
      this.treedate.path = row.path;
      this.treedate.sortId = row.sortId;
      this.treedate.disable = row.disable;
    },
  },
};
</script>